<script setup lang="ts">
import router from '@/router';
import type { PracticeItem } from '@/views/Square/PracticeSquare/home/PracticeItem';
import { ArrowRightOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  practiceItem: PracticeItem,
  buttonText?: string,
}>();

const onStudyBtnClicked = () => {
  if (props.practiceItem.practiceType === '内链') {
    router.push({
      path: '/user/practice/details',
      query: {
        customPrimary: props.practiceItem.customPrimary,
        practiceUrl: props.practiceItem.practiceUrl,
      },
    });
  }
  else {
    window.open(props.practiceItem.practiceUrl, '_blank');
  }
};
</script>

<template>
  <div class="flex flex-col bg-white h-[12rem] rounded-lg transition-transform duration-200 hover:shadow-lg hover:scale-95 p-2">
    <div class="flex flex-1 w-full h-[80%]">
      <div class="w-[40%] h-full">
        <img :src="practiceItem.practiceImage" alt="practice image" class="w-full h-full object-cover p-0 rounded-lg">
      </div>

      <!-- 信息区域 -->
      <div class="w-[60%] px-2 flex flex-col">
        <h3 class="font-bold truncate mb-1 text-xl">
          {{ practiceItem.practiceName }}
        </h3>
        <p class="text-sm leading-6 line-clamp-3">
          {{ practiceItem.practiceIntroduction }}
        </p>
      </div>
    </div>

    <div class="flex flex-row  justify-end gap-2">
      <a-button
        type="primary"
        icon-placement="right"
        style="font-size: 14px;border: none;"
        @click="onStudyBtnClicked"
      >
        {{ buttonText || '立即参加' }}
        <ArrowRightOutlined />
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/custom-theme.scss' as *;
</style>
